<template>
  <div class="crumb">
    <!-- {{navs}} -->
    <span v-for="(item, index) in navs" :key="index">
      <span :class="{ active: index == navs.length - 1 }">{{ item.name }}</span>
      <i v-show="index < navs.length - 1">/</i>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["navs"],
};
</script>

<style lang="less" scoped>
.crumb {
  margin: 10px 0;
  span {
    color: #999;
    i {
      margin: 0 10px;
    }
    /* 高亮显示 */
    &.active {
    font-weight: 700;
    color: black;
  }
  }
 
}
</style>
